import h from './mysnabbdom/h.js';
import patch from './mysnabbdom/patch.js';

const myVnode1 = h('h3', {}, [
  h('p', {}, '111'),
  h('p', {}, '222'),
  h('p', {}, '333'),
  h('p', {}, h('span', {}, 'A')),
]);
console.log(myVnode1)

const myVnode2 = h('div', {}, '孤儿文本节点');
// console.log(myVnode2)

const myVnode3 = h('ul', {},
  [
    h('li', {}, '橘子'),
    h('li', {}, '苹果'),
    h('li', {}, '香蕉'),
    h('li', {}, [
      h('p', {}, '番茄'),
      h('p', {}, '西红柿'),
    ]),
  ])
// console.log(myVnode3)

const myVnode4 = h('section', {}, '一个破文字，没有子节点')

const myVnode5 = h('section', {},
  [
    h('p', {key:'A'}, 'A'),
    h('p', {key:'B'}, 'B'),
    h('p', {key:'C'}, 'C'),
    // h('p', {key:'Q'}, 'Qqqq'),
    // h('p', {key:'D'}, 'D'),
    // h('p', {key:'E'}, 'E'),
  ])

const myVnode6 = h('section', {},
  [
    h('p', {key:'F'}, 'F'),
    h('p', {key:'A'}, 'Aaaa'),
    h('p', {key:'B'}, 'B'),
    h('p', {key:'C'}, 'Cccc'),
    h('p', {key:'G'}, 'G'),
    h('p', {key:'D'}, 'D'),
    h('p', {key:'E'}, 'E'),
  ])

const container = document.getElementById('container');
const btn = document.getElementById('btn');

patch(container, myVnode5);

btn.addEventListener('click', function () {
  patch(myVnode5, myVnode6)
})